<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>slog调试页面</title>
	<link rel="stylesheet" href="__STATIC__/bootstrap/css/bootstrap.css">
	<script src="__STATIC__/jquery-2.0.3.min.js"></script>
	<script src="__ADDONROOT__/static/eventsource.js"></script>
</head>
<body onload="init();">
<div class="container col-md-12">
	<div class="row">
		<div class="alert alert-block">请打开浏览器的调试窗口 console终端，进行异步调试查询</div>
		<div class="alert alert-info">进入此页面说明异步调试功能已经成功，您可以通下面的“停止”按钮停止发送ajax请求，通过“清除调试日志”，清除为了显示产生的临时数据</div>
		<div class="center-block">
			<label for="">已经有<span class="badge badge-info">{$slog_count}</span>条日志记录。</label>
			<button class="btn btn-primary" id="start">开始</button>
			<button class="btn btn-primary" id="clear">清除调试日志</button>
			<button class="btn btn-danger" id="end">停止调试</button>
		</div>
	</div>
</div>

<script type="text/javascript">
	//声明一个worker;
	var source;
	var think_worker;
	//初始化调用方法
	function init(){
		if(window.Worker){
			think_worker = new Worker('__ADDONROOT__/static/worker.js');
			think_worker.onmessage = function(event){
				p(event.data);
			};
			think_worker.postMessage(true);
		}else{
			alert("浏览器不支持Web Workers!");
		}
		p('开始异步调试');
		$('#start').attr('disabled',true);
		$('#end').attr('disabled', false);
	}
	//退出方法，关闭EventSource
	function clear(){
		$.get('{:addons_url("Slog://Slog/clear")}' ,function(){
			p("已经成功清除所有日志！");
			location.reload(true);
		});
	}
	function quit(){
		think_worker.terminate();
		p("已经停止异步调试");
		$(this).attr('disabled', true);
		$('#start').attr('disabled', false);
	}
	//信息输出方法
	function p(msg){
		try{
			data = JSON.parse(msg);
			logs = data['logs'];
		}catch(err){
			console.log(msg);
			return;
		}
    	logs.forEach(function(log){
            if(console[log.type]){
          		if(log.css){
                	console[log.type]('%c'+log.msg,log.css);
      			}else{
                	console[log.type](log.msg);
          		}
              return ;
            }

            if('alert'==log.type){
                alert(log.msg);
            }else{
                alert('SocketLog type error, '+log.type);
            }
    	});
	}
	$('#start').on('click', init);
	$('#clear').on('click', clear);
	$('#end').on('click', quit);
</script>
</body>
</html>